// Stats Pagination
// I like lamp.

.pagination {
	width: 100%;

	&.is-compact .pagination__list-item {
		.pagination__list-button.button.is-borderless {
			padding: 5px 8px;
		}

		&.pagination__ellipsis span {
			padding: 5px 6px;
		}

		&.pagination__arrow .pagination__list-button.button.is-borderless {
			padding: 6px;
		}
	}
}

.pagination__list {
	display: flex;
	margin: 0;
	list-style: none;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	@include clear-fix;
}

// List item styles for all links
.pagination__list-item {
	.pagination__list-button.button.is-borderless,
	&.pagination__ellipsis span {
		@extend %mobile-link-element;
		padding: 8px 12px;
		background-color: var( --color-surface );
		border: solid 1px var( --color-neutral-10 );
		border-right: none;
		font-size: $font-body-small;
		line-height: 18px;
		color: var( --color-text-subtle );
		text-align: center;
		border-radius: 0;
		display: flex;
		flex-wrap: nowrap;

		.gridicon {
			top: 1px;

			.pagination.is-compact & {
				top: 0;
			}
		}
	}

	&:first-child .pagination__list-button.button.is-borderless {
		border-top-left-radius: 2px;
		border-bottom-left-radius: 2px;
	}

	&:last-child .pagination__list-button.button.is-borderless {
		border-right: solid 1px var( --color-neutral-10 );
		border-top-right-radius: 2px;
		border-bottom-right-radius: 2px;
	}
}

// Left/right navigation arrows
.pagination__list-item.pagination__arrow {
	display: flex;
	align-items: center;

	&.is-left {
		padding-left: 14px;
		float: left;

		.gridicon {
			margin-right: 2px;
		}
	}

	&.is-right {
		padding-right: 14px;
		float: right;

		.gridicon {
			margin-left: 2px;
		}
	}

	.gridicon {
		vertical-align: middle;
		width: 18px;
		height: 18px;
	}
}

// // Hover/focus states
.pagination__list-item .pagination__list-button.button.is-borderless:not( [disabled] ):hover,
.pagination__list-item .pagination__list-button.button.is-borderless:focus {
	color: var( --color-neutral-70 );
	outline: none;
}

// Selected state
.pagination__list-item.is-selected .pagination__list-button.button.is-borderless {
	border-color: var( --color-primary );
	background-color: var( --color-primary );
	color: var( --color-text-inverted );
}

.pagination__list-item.is-selected .pagination__list-button.button.is-borderless:hover {
	color: var( --color-text-inverted );
}

.pagination__list-item.is-selected + .pagination__list-item
	.pagination__list-button.button.is-borderless {
	border-left: 0;
}

// Abridgement indication
.pagination__ellipsis,
.pagination__ellipsis:hover {
	@extend %mobile-interface-element;
	color: var( --color-neutral-light );
}
